<template>  
    <div ref="chartRef" style="width: 100%; height: 300px;"></div>  
  </template>  
  
  <script>  
  import * as echarts from 'echarts';  
  import { ref, onMounted, onBeforeUnmount } from 'vue';  
  
  export default {  
    name: 'ChartComponent',  
    setup() {  
      const chartRef = ref(null);  
      const myChart = ref(null);  
  
      // 数据和区间  
      const categories = ['0-125', '126-250', '251-375', '376-500', '501-625', '626-750'];  
      const data = [120, 200, 150, 80, 70, 110]; // 这里可以自由调整人数数据  
  
      const renderChart = () => {  
        const option = {  
          xAxis: {  
            type: 'category',  
            data: categories,  
          },  
          yAxis: {  
            type: 'value',  
            name: '人数',  
          },  
          series: [  
            {  
              data: data,  
              type: 'line',  
              smooth: true,  
            },  
          ],  
          title: {
    left: 'center',
    text: '全省学生成绩折线图'
  },
        };  
        myChart.value.setOption(option);  
      };  
  
      onMounted(() => {  
        myChart.value = echarts.init(chartRef.value);  
        renderChart();  
      });  
  
      onBeforeUnmount(() => {  
        if (myChart.value) {  
          myChart.value.dispose();  
        }  
      });  
  
      return {  
        chartRef,  
      };  
    },  
  };  
  </script>  
  
  <style scoped>  
  /* 可根据需要添加样式 */  
  </style>